<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE HTML>
<html>
	<head>
		<title>wildflat Website Template | Blog :: w3layouts</title>
		<link href="css/style.css" rel='stylesheet' type='text/css' />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
		</script>
		<!----webfonts---->
		<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
		<!----//webfonts---->
		<!---script---->
		<script src="js/jquery.min.js"></script>
		<!---//script---->
		<!-----768px-menu----->
		<link type="text/css" rel="stylesheet" href="css/jquery.mmenu.all.css" />
		<script type="text/javascript" src="js/jquery.mmenu.js"></script>
			<script type="text/javascript">
				//	The menu on the left
				$(function() {
					$('nav#menu-left').mmenu();
				});
		</script>
		<!-----//768px-menu----->
		 <!---strat-slider---->
	    <link rel="stylesheet" type="text/css" href="css/style2.css" />
		<script type="text/javascript" src="js/modernizr.custom.28468.js"></script>
		<!---//strat-slider---->
	</head>
	<body>
		<!----start-wrap---->
		<!------start-768px-menu---->
			<div id="page">
					<div id="header">
						<a class="navicon" href="#menu-left"> </a>
					</div>
					<nav id="menu-left">
						<ul>
							<li class="active"><a href="#work">Work</a></li>
							<li><a href="#about">About</a></li>
							<li><a href="#services">Services</a></li>
							<li><a href="#news">News</a></li>
							<li><a href="#contact">Contact</a></li>
							<li><a href="blog.html">Blog</a></li>
						</ul>
					</nav>
			</div>
		<!------start-768px-menu---->
			<!----start-header---->
			<div class="header" id="move-top">
				<div class="wrap">
				<div class="header-left">
					<!----start-logo---->
					<div class="logo">
						<a href="index.html"><img src="images/logo.png" title="wildflat" /> </a>
					</div>
					<!----//End-logo---->
				</div>
				<div class="header-right">
					<!----start-top-nav---->
					<div class="top-nav">
						<ul>
							<li class="active"><a href="#work">Work</a></li>
							<li><a href="#about">About</a></li>
							<li><a href="#services">Services</a></li>
							<li><a href="#news">News</a></li>
							<li><a href="#contact">Contact</a></li>
							<li><a href="blog.html">Blog</a></li>
						</ul>
					</div>
					<!----//End-top-nav---->
					<!----start-search-box--->
					<div class="search">
						<div class="search-box">
							<div id="sb-search" class="sb-search">
								<form>
									<input class="sb-search-input" placeholder="Enter your search term..." type="search" name="search" id="search">
									<input class="sb-search-submit" type="submit" value="">
									<span class="sb-icon-search"> </span>
								</form>
							</div>
						</div>
						<!----search-scripts---->
						<script src="js/modernizr.custom.js"></script>
						<script src="js/classie.js"></script>
						<script src="js/uisearch.js"></script>
						<script>
							new UISearch( document.getElementById( 'sb-search' ) );
						</script>
						<!----//search-scripts---->
					</div>
					</div>
					<!----//End-search-box--->
					<div class="clear"> </div>
				</div>
				<div class="clear"> </div>
			</div>
			<!----//End-header---->
			<!----start-blog---->
			<div class="blog">
				<div class="wrap">
					<div class="blog-left">
						<div class="blog-left-head">
							<span> </span>
							<h1>BLOG</h1>
						</div>
						<div class="blog-artical-grids">
							<div class="blog-artical-grid">
								<h3><a href="single-page.html">Visualizing Tweets around Emmy-nominated shows</a></h3>
								<div class="blog-artical-grid-pic-info">
									<div class="blog-artical-grid-pic">
										<img src="images/artical-pic1.jpg" title="place-name" />
									</div>
									<div class="blog-artical-grid-pic-info-admin">
										<div class="blog-artical-grid-pic-info-admin-left">
											<ul>
												<li><a href="#"><img src="images/admin-pic1.jpg" title="name-here" /></a></li>
												<li><p>Written by <a href="#">Garry Walt</a></p></li>
											</ul>
										</div>
										<div class="blog-artical-grid-pic-info-admin-right">
											<h6>19/<span>09</span></h6>
										</div>
										<div class="clear"> </div>
									</div>
								</div>
								<!----start-artical-tags---->
								<div class="artical-tags">
									<ul>
										<li><a href="#">Art</a></li>
										<li><a href="#">WebDesign</a></li>
										<li><a href="#">Logotypes</a></li>
										<div class="clear"> </div>
									</ul>
								</div>
								<!----//End-artical-tags---->
								<!-----start-artical-destilas---->
									<div class="artical-details">
										<div class="artical-details-left">
											<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin felis vitae urna auctor sodales. Donec semper justo nec mauris aliquam mattis. <a href="#">Donec faucibus</a> orci quis tortor accumsan, in iaculis ipsum euismod. Phasellus consequat tempus ipsum, in porta magna ultricies cursus. Pellentesque scelerisque orci justo, non elementum purus lacinia id.</p>
										</div>
										<div class="artical-details-right">
											<p>Nunc id mi rutrum, sollicitudin elit eget, pretium risus. Quisque molestie nunc sed justo ornare, ipsum lorem mattis urna, eu feugiat augue justo quis risus. Sed vitae lacus dignissim, sodales justo sit amet, tristique justo. <a href="#">Proin eget erat</a> quis leo suscipit laoreet at ac diam. Integer eu interdum mauris. Aenean a aliquam turpis, eu tincidunt urna.</p>
										</div>
										<div class="clear"> </div>
									</div>
								<!-----//End-artical-destilas---->
								<div class="artical-more-btn">
									<a href="single-page.html"><span>ReadMore...</span></a>
								</div>
							</div><!----//End-blog-artical-grid--->
							<div class="blog-artical-grid">
								<h3><a href="single-page.html">London Fashion Week drives more buzz than ever on Twitter</a></h3>
								<div class="blog-artical-grid-pic-info">
									<div class="blog-artical-grid-pic">
										<img src="images/artical-pic4.jpg" title="place-name" />
									</div>
									<div class="blog-artical-grid-pic-info-admin">
										<div class="blog-artical-grid-pic-info-admin-left">
											<ul>
												<li><a href="#"><img src="images/admin-pic4.jpg" title="name-here" /></a></li>
												<li><p>Written by <a href="#">Garry Walt</a></p></li>
											</ul>
										</div>
										<div class="blog-artical-grid-pic-info-admin-right">
											<h6>19/<span>09</span></h6>
										</div>
										<div class="clear"> </div>
									</div>
								</div>
								<!----start-artical-tags---->
								<div class="artical-tags">
									<ul>
										<li><a href="#">Art</a></li>
										<li><a href="#">WebDesign</a></li>
										<li><a href="#">Logotypes</a></li>
										<div class="clear"> </div>
									</ul>
								</div>
								<!----//End-artical-tags---->
								<!-----start-artical-destilas---->
									<div class="artical-details">
										<div class="artical-details-left">
											<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin felis vitae urna auctor sodales. Donec semper justo nec mauris aliquam mattis. <a href="#">Donec faucibus</a> orci quis tortor accumsan, in iaculis ipsum euismod. Phasellus consequat tempus ipsum, in porta magna ultricies cursus. Pellentesque scelerisque orci justo, non elementum purus lacinia id.</p>
										</div>
										<div class="artical-details-right">
											<p>Nunc id mi rutrum, sollicitudin elit eget, pretium risus. Quisque molestie nunc sed justo ornare, ipsum lorem mattis urna, eu feugiat augue justo quis risus. Sed vitae lacus dignissim, sodales justo sit amet, tristique justo. <a href="#">Proin eget erat</a> quis leo suscipit laoreet at ac diam. Integer eu interdum mauris. Aenean a aliquam turpis, eu tincidunt urna.</p>
										</div>
										<div class="clear"> </div>
									</div>
								<!-----//End-artical-destilas---->
								<div class="artical-more-btn">
									<a href="single-page.html"><span>ReadMore...</span></a>
								</div>
							</div><!----//End-blog-artical-grid--->
							<div class="blog-artical-grid">
								<h3><a href="#">#RockInRio 2013</a></h3>
								<div class="blog-artical-grid-pic-info">
									<div class="blog-artical-grid-pic">
										<img src="images/artical-pic2.jpg" title="place-name" />
									</div>
									<div class="blog-artical-grid-pic-info-admin">
										<div class="blog-artical-grid-pic-info-admin-left">
											<ul>
												<li><a href="#"><img src="images/admin-pic2.jpg" title="name-here" /></a></li>
												<li><p>Written by <a href="#">Garry Walt</a></p></li>
											</ul>
										</div>
										<div class="blog-artical-grid-pic-info-admin-right">
											<h6>19/<span>09</span></h6>
										</div>
										<div class="clear"> </div>
									</div>
								</div>
								<!----start-artical-tags---->
								<div class="artical-tags">
									<ul>
										<li><a href="#">Art</a></li>
										<li><a href="#">WebDesign</a></li>
										<li><a href="#">Logotypes</a></li>
										<div class="clear"> </div>
									</ul>
								</div>
								<!----//End-artical-tags---->
								<!-----start-artical-destilas---->
									<div class="artical-details">
										<div class="artical-details-left">
											<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin felis vitae urna auctor sodales. Donec semper justo nec mauris aliquam mattis. <a href="#">Donec faucibus</a> orci quis tortor accumsan, in iaculis ipsum euismod. Phasellus consequat tempus ipsum, in porta magna ultricies cursus. Pellentesque scelerisque orci justo, non elementum purus lacinia id.</p>
										</div>
										<div class="artical-details-right">
											<p>Nunc id mi rutrum, sollicitudin elit eget, pretium risus. Quisque molestie nunc sed justo ornare, ipsum lorem mattis urna, eu feugiat augue justo quis risus. Sed vitae lacus dignissim, sodales justo sit amet, tristique justo. <a href="#">Proin eget erat</a> quis leo suscipit laoreet at ac diam. Integer eu interdum mauris. Aenean a aliquam turpis, eu tincidunt urna.</p>
										</div>
										<div class="clear"> </div>
									</div>
								<!-----//End-artical-destilas---->
								<div class="artical-more-btn">
									<a href="#"><span>ReadMore...</span></a>
								</div>
							</div><!----//End-blog-artical-grid--->
							<div class="blog-artical-grid">
								<h3><a href="single-page.html">Vine videos that grew on us - Sept 13</a></h3>
								<div onclick="location.href='single-page.html';" class="blog-artical-grid-pic-info">
									<div class="blog-artical-grid-pic">
										<img src="images/artical-pic3.jpg" title="place-name" />
									</div>
									<div class="blog-artical-grid-pic-info-admin">
										<div class="blog-artical-grid-pic-info-admin-left">
											<ul>
												<li><a href="#"><img src="images/admin-pic3.jpg" title="name-here" /></a></li>
												<li><p>Written by <a href="#">Garry Walt</a></p></li>
											</ul>
										</div>
										<div class="blog-artical-grid-pic-info-admin-right">
											<h6>19/<span>09</span></h6>
										</div>
										<div class="clear"> </div>
									</div>
								</div>
								<!----start-artical-tags---->
								<div class="artical-tags">
									<ul>
										<li><a href="#">Art</a></li>
										<li><a href="#">WebDesign</a></li>
										<li><a href="#">Logotypes</a></li>
										<div class="clear"> </div>
									</ul>
								</div>
								<!----//End-artical-tags---->
								<!-----start-artical-destilas---->
									<div class="artical-details">
										<div class="artical-details-left">
											<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin felis vitae urna auctor sodales. Donec semper justo nec mauris aliquam mattis. <a href="#">Donec faucibus</a> orci quis tortor accumsan, in iaculis ipsum euismod. Phasellus consequat tempus ipsum, in porta magna ultricies cursus. Pellentesque scelerisque orci justo, non elementum purus lacinia id.</p>
										</div>
										<div class="artical-details-right">
											<p>Nunc id mi rutrum, sollicitudin elit eget, pretium risus. Quisque molestie nunc sed justo ornare, ipsum lorem mattis urna, eu feugiat augue justo quis risus. Sed vitae lacus dignissim, sodales justo sit amet, tristique justo. <a href="#">Proin eget erat</a> quis leo suscipit laoreet at ac diam. Integer eu interdum mauris. Aenean a aliquam turpis, eu tincidunt urna.</p>
										</div>
										<div class="clear"> </div>
									</div>
								<!-----//End-artical-destilas---->
								<div class="artical-more-btn">
									<a href="single-page.html"><span>ReadMore...</span></a>
								</div>
							</div><!----//End-blog-artical-grid--->
						</div>
						<div class="blog-artical-pagenate">
							<ul>
								<li class="frist"><span> </span></li>
								<li class="active"><a href="#">1</a></li>
								<li><a href="#">2</a></li>
								<li><a href="#">3</a></li>
								<li><a href="#">4</a></li>
								<li class="more-art"><span> </span></li>
								<li class="last"><span> </span></li>
							</ul>
						</div>
					</div>
					<div class="blog-right">
						<div class="blog-right-head">
							<span> </span>
							<h3>CaTEGORIES</h3>
						</div>
						<!----start-accordinatio-files--->
						<script src="js/vallenato.js" type="text/javascript" charset="utf-8"></script>
						<link rel="stylesheet" href="css/vallenato.css" type="text/css" media="screen" charset="utf-8">
						<!----start-accordinatio-files--->
						<div class="blog-right-accordinations">
							<h2 class="accordion-header">Webdesign</h2>
							<div class="accordion-content">
								<ul>
									<li><a href="#">adipiscing elit.</a></li>
									<li><a href="#">consectetur </a></li>
									<li><a href="#">Pellentesque </a></li>
									<li><a href="#">sollicitudin felis </a></li>
								</ul>
							</div>
							<h2 class="accordion-header">Art design</h2>
							<div class="accordion-content">
								<ul>
									<li><a href="#">adipiscing elit.</a></li>
									<li><a href="#">consectetur </a></li>
									<li><a href="#">Pellentesque </a></li>
									<li><a href="#">sollicitudin felis </a></li>
								</ul>
							</div>
							<h2 class="accordion-header">Logotypes</h2>
							<div class="accordion-content">
								<ul>
									<li><a href="#">adipiscing elit.</a></li>
									<li><a href="#">consectetur </a></li>
									<li><a href="#">Pellentesque </a></li>
									<li><a href="#">sollicitudin felis </a></li>
								</ul>
							</div>
							<h2 class="accordion-header">Photography</h2>
							<div class="accordion-content">
								<ul>
									<li><a href="#">adipiscing elit.</a></li>
									<li><a href="#">consectetur </a></li>
									<li><a href="#">Pellentesque </a></li>
									<li><a href="#">sollicitudin felis </a></li>
								</ul>
							</div>
							<h2 class="accordion-header">Videos</h2>
							<div class="accordion-content">
								<ul>
									<li><a href="#">adipiscing elit.</a></li>
									<li><a href="#">consectetur </a></li>
									<li><a href="#">Pellentesque </a></li>
									<li><a href="#">sollicitudin felis </a></li>
								</ul>
							</div>
							<h2 class="accordion-header">Other</h2>
							<div class="accordion-content">
								<ul>
									<li><a href="#">adipiscing elit.</a></li>
									<li><a href="#">consectetur </a></li>
									<li><a href="#">Pellentesque </a></li>
									<li><a href="#">sollicitudin felis </a></li>
								</ul>
							</div>
						</div>
						<!----start-tags---->
						<div class="blog-right-head">
							<span> </span>
							<h3>Tag's</h3>
						</div>
						<div class="tags-for">
									<ul>
										<li><a href="#">Art</a></li>
										<li><a href="#">WebDesign</a></li>
										<li><a href="#">Logotypes</a></li>
										<li><a href="#">Photo</a></li>
										<li><a href="#">Video</a></li>
										<li><a href="#">Other</a></li>
										<li><a href="#">WEb</a></li>
										<div class="clear"> </div>
									</ul>
						</div>
						<!----//End-tags---->
						<!----start-comments---->
						<div class="blog-comments">
							<div class="blog-right-head">
								<span> </span>
								<h3>Last Comments</h3>
							</div>
							<div class="blog-comment-grids">
								<div class="blog-comment-grid">
									<div class="blog-comment-grid-left">
										<img src="images/admin-pic1.jpg" alt="" />
									</div>
									<div class="blog-comment-grid-right">
										<a href="#">Endy Brown</a>
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
									</div>
									<div class="clear"> </div>
								</div>
								<div class="blog-comment-grid">
									<div class="blog-comment-grid-left">
										<img src="images/admin-pic2.jpg" alt="" />
									</div>
									<div class="blog-comment-grid-right">
										<a href="#">Millana Watson</a>
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
									</div>
									<div class="clear"> </div>
								</div>
								<div class="blog-comment-grid">
									<div class="blog-comment-grid-left">
										<img src="images/admin-pic3.jpg" alt="" />
									</div>
									<div class="blog-comment-grid-right">
										<a href="#">Andrew Haching</a>
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
									</div>
									<div class="clear"> </div>
								</div>
								<div class="blog-comment-grid">
									<div class="blog-comment-grid-left">
										<img src="images/admin-pic4.jpg" alt="" />
									</div>
									<div class="blog-comment-grid-right">
										<a href="#">Bruse Loome</a>
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
									</div>
									<div class="clear"> </div>
								</div>
							</div>
						</div>
						<!----start-Comments---->
					</div>
					<div class="clear"> </div>
				</div>
			</div>
			<!----//End-blog---->
			<!----start-contact---->
			<div class="contact" id="contact">
				<div class="wrap">
					<div class="contact-left">
						<div class="contact-head">
								<span> </span>
								<h3>Contact US</h3>
						</div>
						<form>
							<div class="form-left">
								<input type="text" placeholder="Name" required />
								<input type="text" placeholder="Email" required />
								<input type="text" placeholder="Phone" required />
							</div>
							<div class="form-right">
								<textarea rows="2" cols="70" onfocus="if(this.value == 'Comment') this.value='';" onblur="if(this.value == '') this.value='Comment';" >Comment</textarea>
							</div>
							<div class="clear"> </div>
							<input type="submit" value="Send latter" />
							<div class="clear"> </div>
						</form>
					</div>
					<div class="contact-right">
						<div class="contact-head">
								<span> </span>
								<h3>FLICKR STREAM</h3>
						</div>
						<div class="flicker-grids">
							<ul>
								<li><a href="#"><img src="images/f1.jpg" alt="" /></a></li>
								<li><a href="#"><img src="images/f2.jpg" alt="" /></a></li>
								<li><a href="#"><img src="images/f3.jpg" alt="" /></a></li>
								<li><a href="#"><img src="images/f4.jpg" alt="" /></a></li>
								<li><a href="#"><img src="images/f5.jpg" alt="" /></a></li>
								<li><a href="#"><img src="images/f6.jpg" alt="" /></a></li>
							</ul>
						</div>
					</div>
					<div class="clear"> </div>
				</div>
			</div>
			<!----//End-contact---->
			<!---- start-footer---->
			<div class="footer">
				<div class="wrap"> 
				<div class="footer-left">
					<h2>FANKS FOR WATCHING, <span>I hope you enjoyed it</span></h2>
				</div>
				<div class="footer-right">
					<ul>
						<li><a class="youtube" href="#"><span> </span></a></li>
						<li><a class="skye" href="#"><span> </span></a></li>
						<li><a class="flicker" href="#"><span> </span></a></li>
						<li><a class="rss" href="#"><span> </span></a></li>
						<li><a class="twitter" href="#"><span> </span></a></li>
						<li><a class="dribbble" href="#"><span> </span></a></li>
						<div class="clear"> </div>
					</ul>
				</div>
				<div class="clear"> </div>
				</div>
			</div>
			<!---- //End-footer---->
			<!----start-copy-right---->
			<div class="copy-right">
				<div class="wrap">
					<p>Template by <a href="http://w3layouts.com/">W3layouts</a></p>
					<script type="text/javascript">
							$(document).ready(function() {
								$().UItoTop({ easingType: 'easeOutQuart' });
							});
						</script>
				    <a href="#move-top" id="toTop" style="display: block;"><span id="toTopHover" style="opacity: 1;"> </span></a>
				</div>
			</div>
			<!----//End-copy-right---->
		<!----//End-wrap---->
	</body>
</html>

